<template>
  <div class="contain">
    <div class="jianjie">
      <div style="margin-bottom: 15px;font-weight:bold">
        <span style="color: red; font-weight: bold; margin-right: 5px">|</span>
        专业简介
      </div>
      <div>{{ listData.is_what }}</div>
    </div>
    <div class="jianjie">
      <div style="margin-bottom: 15px;font-weight:bold">
        <span style="color: red; font-weight: bold; margin-right: 5px">|</span>
        开设课程
      </div>
      <div>{{ listData.learn_what }}</div>
    </div>
    <div class="jianjie">
      <div style="margin-bottom: 15px;font-weight:bold">
        <span style="color: red; font-weight: bold; margin-right: 5px">|</span>
        就业方向
      </div>
      <div>{{ listData.do_what }}</div>
    </div>
    <div class="jianjie">
      <div style="margin-bottom: 15px;font-weight:bold">
        <span style="color: red; font-weight: bold; margin-right: 5px">|</span>
        考研方向
      </div>
      <div>{{ listData.direction }}</div>
    </div>
    <div class="jianjie">
      <div style="margin-bottom: 15px;font-weight:bold">
        <span style="color: red; font-weight: bold; margin-right: 5px">|</span>
        男女比例
      </div>
      <div style="position: relative" v-if="listData.rate">
        <a-progress
          style="margin-right: 15px"
          type="circle"
          :percent="getMan"
          :width="80"
        />
        <span style="position: absolute; bottom: 5px; left: 32px">男</span>
        <a-progress
          type="circle"
          :percent="getWomen"
          :width="80"
          style="margin-right: 15px"
        />
        <span style="position: absolute; bottom: 5px; left: 128px">女</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: Object,
    }
  },
  computed: {
    getMan() {
      return Number(
        this.listData.rate.substring(0, this.listData.rate.search(/:/))
      )
    },
    getWomen() {
      return Number(
        this.listData.rate.substring(this.listData.rate.search(/:/) + 1)
      )
    }
  },
  watch: {
    message(newValue) {
      this.listData = newValue
      console.log(this.listData);
    }
  },
  data() {
    return {
      listData: {}
    }
  }
}
</script>

<style lang="less" scoped>
.contain {
  //   border: 1px solid #ccc;
  padding: 5px 10px;
}
.jianjie {
  border: 1px solid #ccc;
  padding: 5px 10px;
  margin-bottom: 10px;
}
</style>